<template>
  <div class="content_padding">
    <el-table :data="messageList" :height="tableHeight" v-if="tableHeight" style="width: 100%;">
      <el-table-column prop="device_sn" label="设备SN"></el-table-column>
      <el-table-column prop="device_state" label="状态/请求"></el-table-column>
      <el-table-column prop="device_date" label="时间"></el-table-column>
    </el-table>
    <Pagination :pageData="pageData"></Pagination>

		<el-row class="but_box">
			<el-button type="text" size="small" icon="el-icon-refresh" plain>刷新</el-button>
			<el-button type="text" size="small" icon="el-icon-bell" plain @click="returnPreviousPage">返回</el-button>
		</el-row>
  </div>
</template>

<script>
import Pagination from "../components/Pagination"

export default {
	name: "DeviceMessageInform",
  components: {
		Pagination
	},
  data() {
    return {
			pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
			},
			tableHeight: 0,
			messageList:[]
		};
  },

  created() {
    this.getTableHeight();
  },

  mounted() {
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },

  beforeRouteLeave(to, from, next) {
    window.onresize = null;
    next();
	},

  methods: {
		getTableHeight() {
      let tableH = 210;
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
		},

		returnPreviousPage () {
			this.$parent.resetPresentPage();
		},
	},
};
</script>

<style  scoped>
.content_padding {
  margin-top: 80px;
}

.but_box{
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1000;
}
</style>
